<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import headerUtil from "./base/common/headerUtil.vue";
import homeBannerUtil from "./base/home/homeBannerUtil.vue";
import commonNavUtil from "./base/common/commonNavUtil.vue";
import homeMeunUtil from "./base/home/homeMeunUtil.vue";
import homeAdvertUtil from "./base/home/homeAdvertUtil.vue";
import homeGiftUtil from "./base/home/homeGiftUtil.vue";
import homeSeckillUtil from "./base/home/homeSeckillUtil.vue";
import homeProductModelOneUtil from "./base/home/homeProductModelOneUtil.vue";
import homeProductModelTwoUtil from "./base/home/homeProductModelTwoUtil.vue";
import homeProductModelThreeUtil from "./base/home/homeProductModelThreeUtil.vue";
import homeProductModelFourUtil from "./base/home/homeProductModelFourUtil.vue";
import homeNominateUtil from "./base/home/homeNominateUtil.vue";
import homeOtherProductUtil from "./base/home/homeOtherProductUtil.vue";
import homeLoadUtil from "./base/home/homeLoadUtil.vue";

import reqApis from '../req/reqApis.js';
// import { wxchatPowers } from "../assets/js/wechatPowers.js";

const router = useRouter();

const currentData = ref<any>({
  headerObj: {
    showType: 0,
    isRed: true
  },
  currentPos: 0,
  pageIndex: 1,
  isStop: false,
  timer: null,
  homeData: {
    advertList: null,
    perfectProduct: null,
    dayProduct:null,
    loveProduct: null,
    streetProduct: null,
    list: []
  },
  iNow: 0,
});

const scrollOut = ref();



const headerFn = (type: Number) => {
  if(type == 1 || type == 2) {
    router.push({path: "/searchList"})
  }
};
const getProductListFn = () => {
  if(!currentData.value.isStop){
    let params = {
      page: currentData.value.pageIndex,
      size: 10
    };
    reqApis.getProductListApi(params).then(res => {
      if(res.data.length>0){
        currentData.value.homeData.list.push(...res.data);
      }else{
        currentData.value.isStop = true;
      }
    });
  }
};

const getHomeDataFn = () =>  {
  reqApis.getHomeDataApi().then((res: any) => {
    currentData.value.homeData.advertList = res.data.advertList;
    currentData.value.homeData.perfectProduct = res.data.perfectProduct;
    currentData.value.homeData.dayProduct = res.data.dayProduct;
    currentData.value.homeData.loveProduct = res.data.loveProduct;
    currentData.value.homeData.streetProduct = res.data.streetProduct;
  });
};

const toTop = () => {
  let distance = currentData.value.currentPos; //获得当前高度
  let step = distance/50; //每步的距离
  clearInterval(currentData.value.timer);
  currentData.value.timer = setInterval(() => {
    if(distance>0) {
      distance-= step;
    }else {
      distance = 0;
      clearInterval(currentData.value.timer);
    }
    nextTick(() => {
      scrollOut.value.scrollTop = distance;
    })
  },10)
};


const scrollData = () => {

  let outH = scrollOut.value.scrollHeight;
  let currentH = scrollOut.value.offsetHeight;
  let offH = scrollOut.value.scrollTop;
  currentData.value.currentPos = Math.ceil(offH);
  if(offH>20) {
    currentData.value.headerObj.isRed = true;
  }else {
    currentData.value.headerObj.isRed = false;
  }
    if(currentH + offH >= (outH-1)){
      currentData.value.pageIndex += 1;
      getProductListFn();
    }
};

getProductListFn();
getHomeDataFn();

</script>

<template>
  <section class="home">
    <div class="header">
      <headerUtil :obj="currentData.headerObj" @myClick="headerFn"></headerUtil>
    </div>
    <div class="content" @scroll.passive="scrollData" ref="scrollOut">
      <homeBannerUtil :advertList="currentData.homeData.advertList"></homeBannerUtil>
      <!-- <homeMeunUtil :shopList="[]"></homeMeunUtil>
      <homeAdvertUtil :advertList="currentData.homeData.advertList"></homeAdvertUtil> 
      <homeGiftUtil></homeGiftUtil>
      <homeSeckillUtil></homeSeckillUtil> -->
      <!-- <homeProductModelOneUtil :perfectProduct="currentData.homeData.perfectProduct"></homeProductModelOneUtil> -->
      <homeProductModelTwoUtil :dayProduct="currentData.homeData.dayProduct"></homeProductModelTwoUtil>
      <homeProductModelThreeUtil :loveProduct="currentData.homeData.loveProduct"></homeProductModelThreeUtil>
      <homeProductModelFourUtil :streetProduct="currentData.homeData.streetProduct"></homeProductModelFourUtil>
      <homeNominateUtil></homeNominateUtil> 
      <div class="other-product">
        <homeOtherProductUtil v-for="(item,index) in currentData.homeData.list" :product="item" :key="index"></homeOtherProductUtil>
      </div>
      <homeLoadUtil v-if="!currentData.isStop"></homeLoadUtil>
      <div class="top-icon" @click="toTop()"></div> 
    </div>
    <commonNavUtil></commonNavUtil>
  </section>  
</template>

<style lang="less" scoped>
.home {
  position: relative;
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 3.75rem;
    height: .44rem;
    // position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
  }
  .content {
    width: 3.75rem;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    .top-icon {
      width: .4rem;
      height: .4rem;
      position: fixed;
      background: url("../assets/images/top-icon-1.png") no-repeat center;
      background-size: contain;
      z-index: 101;
      bottom: .8rem;
      right: .1rem;
    }
    .other-product {
      overflow: hidden;
      >section {
        float: left;
        margin-bottom: .05rem;
        &:nth-of-type(2n) {
          float: right;
        }
      }
    }
  }
}
</style>
